<template>
    <div class="collection_article_tab">
        <el-empty description="当前还没有收藏任何贴文" v-if="articleList.length==0" />
        <div class="collection_article_list">
            <div class="collection_article_item" v-for="article in articleList" :key="article.articleId">
                <article-component :title="article.articleTitle" :desc="article.articleDesc"
                    :authorPic="article.authorPicUrl" :cover="article.articleCoverUrl" :id="article.articleId"
                    :eye="article.articleEye" :comment-count="article.commentCount" :timestamp="article.articleDate"
                    :nickName="article.articleNickname" />
                <el-dropdown style="float:right;margin: 20px auto 0px;color: var(--el-color-primary);">
                    <span class="el-dropdown-link">
                        编辑
                        <el-icon class="el-icon--right">
                            <arrow-down />
                        </el-icon>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="delCollection(article.collectionId)">删除</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown><el-divider style="float:right" border-style="dotted" />
            </div>
        </div>
        <!-- <el-pagination style="display:flex;justify-content: center;" background layout="prev, pager, next"
            :hide-on-single-page="true" :total="1000" /> -->
    </div>
</template>

<script>
import ArticleComponent from '../ArticleComponent.vue'

export default {
    components: { ArticleComponent },
    data() {
        return {
            articleList: []
        }
    },
    created() {
        this.getCollectionArticle()
    },
    methods: {
        delCollection(collectionId) {
            this.$store.state.ajaxQueue.length++
            this.$request.get('/collection/del/' + collectionId).then(() => {
                this.$store.state.ajaxQueue.finished++
                this.getCollectionArticle()
            })
        },
        getCollectionArticle() {
            this.$store.state.ajaxQueue.length++
            this.$request.get('/collection/list').then(data => {
                this.$store.state.ajaxQueue.finished++
                if (data.data == null){
                    this.articleList=[]
                    console.log(this.articleList,this.articleList==[]);
                    return
                } 
                this.articleList = data.data
                this.articleList.sort((article1, article2) => article2.articleDate - article1.articleDate)
            })
        }
    },

}
</script>

<style scoped>
.collection_article_list {
    display: flex;
    flex-wrap: wrap;
}

.collection_article_item {
    padding: 10px;
    width: 50%;
}
</style>